<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
	<title>api</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../css/cart.css" />
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<script>
    (function () {
        function o() {
            document.documentElement.style.fontSize = (document.documentElement.clientWidth > 414 ? 414 : document.documentElement.clientWidth) / 12 + "px"
        }

        var e = null;
        window.addEventListener("resize", function () {
            clearTimeout(e), e = setTimeout(o, 300)
        }, !1), o()
    })(window);

	</script>
<style>
	#shop-wrap{
		position: fixed;
		overflow: hidden;
		bottom: 0px;
		height: 40%;
	}
	#shopList{
		position: relative;
	    padding-bottom: 0.1rem;
	    -webkit-overflow-scrolling: touch;
	    overflow-y: auto;
	    white-space: nowrap;
	    font-size: 0;
	    height:200px;
	}
	.product_item {
    overflow: hidden;
    position: relative;
    display: inline-block;
    width: 21%;
    margin-bottom: 5px;
    font-size: 0.12rem;
    white-space: normal;
    vertical-align: top;
    margin-left: 8px;
}
#delete{
	background: url(../image/delete.png) no-repeat center center;
	background-size: 25px;
	width: 25px;
	height: 25px;
}
</style>
</head>
<body id='app'>
	
	<div id='cart' style='margin-bottom: 32px;  background-color: #fff'>
		
		
	</div>
	<script id="cart-template" type="text/x-dot-template">

		{{if(it!=''){}}
		
			{{ for(var i=0; i< it.productlist.length; i++) { }}
				
			<div class="m-cart" id="{{=it.productlist[i].id}}_item" >
				<div class="item border-bottom-img" id="pro-view-6">
					<div class="pic">
						<a >
							<img src="http://wap.jqmao.cn/statics/uploads/{{=it.productlist[i].img}}"></a>
					</div>
					<div class="text">
						<h1 class="title">
							<a >{{=it.productlist[i].name}}</a>
						</h1>
						<div>
							总需 {{=it.productlist[i].totalNum}} 人次，剩余 <em class="remain">{{=it.productlist[i].surplus}}</em>
							人次
						</div>
						<div>
							参与人次
							<div class="w-number">
							<a data-name='{{=it.productlist[i].id}}' class="w-number-btn w-number-btn-minus" data-pro="-1" href="javascript:void(0);"  >-</a>
								<input data-name='{{=it.productlist[i].id}}'  id='{{=it.productlist[i].id}}' data-max='{{=it.productlist[i].surplus}}' class="w-number-input border-img" name='num' data-pro="input" value="{{=it.productlist[i].num}}"  pattern="[0-9]*">
								<a data-name='{{=it.productlist[i].id}}' class="w-number-btn w-number-btn-plus"  data-pro="1" href="javascript:void(0);" >+</a>
								<div type='hidden' value=""></div>
								
							</div>
							<p id='{{=it.productlist[i].id}}_ratio' style="color: #999">抽中几率：{{=it.productlist[i].ratio}}%</p>
						</div>
						<a href="javascript:void(0);" data-pro="del" class="del"> <i id="delete" data-pro="del" data-name='{{=it.productlist[i].id}}' class="ico ico-del"></i>
						</a>
					</div>
					<ul class="c-ul align-items">
                        <li data-name='{{=it.productlist[i].id}}' data="5">5</li>
                        <li data-name='{{=it.productlist[i].id}}' data="10">10</li>
                        <li data-name='{{=it.productlist[i].id}}' data="15">15</li>
                        <li data-name='{{=it.productlist[i].id}}' data="20">20</li>
                        <li data-name='{{=it.productlist[i].id}}' data="30">30</li>
                        <li data-name='{{=it.productlist[i].id}}' id="rand" >随机</li>
                    </ul>

				</div>
			
			</div>


		
			{{}}}
			<div class="m-simpleFooter border-img" id="pro-view-3"><div data-pro="text" class="m-simpleFooter-text"><div id="pro-view-4" >共参与<span id='totalNumber'>{{=it.totalNumber}}</span>件商品，总计：<em class="red"><span id='totalAmount'>{{=it.totalAmount}}</span>元</em></div></div><div data-pro="ext" class="m-simpleFooter-ext"><button class="w-button w-button-main" id="pro-view-2" onclick="submit()" >提交</button></div></div>
		{{}else{}}
			<div class="c-content" style='text-align: center;padding-top: 45%'>
			<div class="c-img">
				<img src="../image/cart_fill.png" width="120px" height="120px"></div>
			<div style="margin: 10px 0px">
				<p class="gray">清单空空如也~</p>
				
			</div>
			<div id='cart' style='margin-bottom: 32px;background-color: #fff'>
	<div style="text-align: center; margin-top: 10px">
				<a onclick = "backmain()" href="javascript:;" style="    width: 110px;
    background: #FF0000;
    border: 1px solid #FF0000;    display: inline-block;
    color: #fff;
    
    height: 32px;
    line-height: 32px;
    text-align: center;

    font-size: 16px;
    border-radius: 4px;">马上去猫购</a>
			</div>
		</div>
		{{}}}
		
</script>
</body>
	<script type="text/javascript" src="../script/zepto.min.js"></script>

	<script type="text/javascript" src="../script/api.js"></script>

	<script src='../script/swipe.js'></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/cart.js"></script>

</html>